<script lang="ts" setup>
import { ref } from 'vue';

// 价格计划数据
const plans = [
    {
        title: '基础版',
        price: '498',
        period: '月',
        features: ['5个经纪人账号', '10个会计账号', '客户管理基础功能', '基础报表统计', '标准客户支持', '每月最多500笔贷款'],
        color: 'secondary',
        recommended: false
    },
    {
        title: '专业版',
        price: '998',
        period: '月',
        features: [
            '20个经纪人账号',
            '30个会计账号',
            '高级客户关系管理',
            '智能佣金分配系统',
            '优先客户支持',
            '每月最多2000笔贷款',
            '数据导出功能'
        ],
        color: 'primary',
        recommended: true
    },
    {
        title: '企业版',
        price: '2998',
        period: '月',
        features: [
            '无限经纪人账号',
            '无限会计账号',
            '全部高级功能',
            '自定义报表和分析',
            '专属客户经理',
            '无限贷款处理',
            'API集成功能',
            '高级安全保障'
        ],
        color: 'success',
        recommended: false
    }
];

// 切换年付/月付
const isAnnual = ref(false);
const getPrice = (basePrice: string | number) => {
    if (isAnnual.value) {
        return (Number(basePrice) * 10).toString(); // 年付享受8.3折优惠
    }
    return basePrice;
};
</script>

<template>
    <div id="pricing" class="py-16 mt-sm-8 overflow-hidden">
        <v-container>
            <div class="maxWidth">
                <v-row class="justify-center">
                    <v-col cols="12" sm="8">
                        <h2 class="sectionTitle text-center font-weight-bold">选择适合您的GuaClass价格方案</h2>
                        <p class="text-h6 text-center mt-4">灵活的价格方案满足不同规模企业的需求</p>

                        <div class="d-flex justify-center mt-6">
                            <v-btn-toggle v-model="isAnnual" color="primary" mandatory rounded="pill">
                                <v-btn :value="false">月付</v-btn>
                                <v-btn :value="true">年付 <span class="text-caption ml-1">（享8.3折优惠）</span></v-btn>
                            </v-btn-toggle>
                        </div>
                    </v-col>
                </v-row>

                <v-row class="mt-10">
                    <v-col v-for="(plan, index) in plans" :key="index" class="mb-6" cols="12" md="4">
                        <v-card :class="{ 'border-2': plan.recommended }" :elevation="plan.recommended ? 10 : 4"
                            :style="plan.recommended ? `border: 2px solid rgb(var(--v-theme-${plan.color}))` : ''"
                            class="pa-6 h-100 d-flex flex-column position-relative">
                            <v-chip v-if="plan.recommended" class="px-4 py-1 position-absolute" color="primary"
                                style="top: -12px; right: 20px">
                                推荐方案
                            </v-chip>

                            <h3 class="text-h5 font-weight-bold mb-6 text-center">{{ plan.title }}</h3>

                            <div class="text-center mb-6">
                                <span class="text-h3 font-weight-bold">${{ getPrice(plan.price) }}</span>
                                <span class="text-body-1 text-medium-emphasis">/ {{ isAnnual ? '年' : plan.period
                                    }}</span>
                            </div>

                            <v-divider class="mb-6"></v-divider>

                            <div class="flex-grow-1">
                                <div v-for="(feature, i) in plan.features" :key="i" class="d-flex align-center mb-3">
                                    <v-icon :color="plan.color" class="mr-2" size="small">mdi-check-circle</v-icon>
                                    <span>{{ feature }}</span>
                                </div>
                            </div>

                            <v-btn :color="plan.color" block class="mt-6" href="/auth/register" size="large"
                                target="_blank" variant="flat">
                                立即选购
                            </v-btn>
                        </v-card>
                    </v-col>
                </v-row>

                <v-row class="justify-center mt-10">
                    <v-col class="text-center" cols="12" md="8">
                        <p class="text-h6">需要更多定制化服务？</p>
                        <v-btn class="mt-4" color="primary" size="large" variant="outlined"> 联系销售团队 </v-btn>
                    </v-col>
                </v-row>
            </div>
        </v-container>
    </div>
</template>
